<template>
	<!-- 创店-活动详情-任务答题  -->
	<view class="taskTitle">
		<!-- <view class="bg_top" :style="'height:'+(2*menuButtonInfo.top+48)+'rpx'"></view>
		<view class="top z_index" :style="'padding-top:'+ menuButtonInfo.top + 'px'">
			<u-icon @click="goNavigateBack" class="top_icon" name="arrow-left" color="#000000" size="40"></u-icon>
			<view class="top_title" >任务答题</view>
		</view> -->
		
		<!-- <view class="content" :style="'padding-top:'+ (2*menuButtonInfo.top+48) + 'rpx'"> -->
		<view class="content">
			<!-- <view class="speed">
				<u-line-progress height="4" active-color="#909499" inactive-color="#e1e3e5" :show-percent="false" :round="false" :percent="progressPercent"></u-line-progress>
			</view> -->
			<view class="answer">
				
				<view class="answer_" v-for="(item, index) in formFieldList" :key="index">
					<view class="answer_num"><text v-if="item.required">*</text>{{index < 9 ? '0' + (index+1) : index+1}}</view>
					<view class="answer_title">{{item.label}}
					
						<input v-if="item.tag == 'el-input' && item.tagIcon == 'input'" type="text" :placeholder="item.placeholder" @blur="blurInput($event, item.filedId)" />
						
						<view class="form_region" v-else-if="item.tag == 'el-select'">
							<input :value="showValue(item.filedId)" class="form_input" type="text" :placeholder="item.placeholder" :disabled="true" @click="getSelect" />
							<image class="form_region_image" src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
							<u-select @confirm="confirmSelect($event, item.filedId)" v-model="showSelect" :list="item.optionList"></u-select>
						</view>
						
						<view class="form_region" v-else-if="item.tag == 'el-address' && optionListAddress">
							<input :value="showValue(item.filedId)" class="form_input" type="text" :placeholder="item.placeholder" :disabled="true" @click="getAddressSelect" />
							<image class="form_region_image" src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
							<u-select @confirm="confirmAddressSelect($event, item.filedId)" mode="mutil-column-auto" v-model="showAddressSelect" :list="optionListAddress"></u-select>
						</view>
						
						<view class="form_input_checkbox" v-else-if="item.tag == 'el-checkbox-group'">
							<checkbox-group  @change="checkboxChange($event, item.filedId, item.optionList)">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item1, index1) in item.optionList" :key="index1">
									<view>
										<checkbox color="red" :value="index1" :checked="item1.checked" />
									</view>
									<view>{{item1.label}}</view>
								</label>
							</checkbox-group>
						</view>
						
						<view class="" v-else-if="item.tag == 'el-upload'">
							<view class="image">
								<u-upload :ref="uUpload" :auto-upload="false" del-bg-color="rgba(255,255,255,0)" class="addBtn_" :custom-btn="true" width="182" height="182" :max-count="9"  @on-choose-complete="onChange($event, item.filedId)">
									<view slot="addBtn" class="addBtn">
										<u-icon name="plus" color="#909499" size="48"></u-icon>
									</view>
								</u-upload>
							</view>
						</view>
						
						<view class="form_region" v-else-if="item.tag == 'el-date-picker'">
							<input :value="showValue(item.filedId)" class="form_input" type="text" :placeholder="item.placeholder" :disabled="true" @click="toShowDate" />
							<image class="form_region_image" src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
							<u-calendar v-model="showDate" max-date="2025-12-30" mode="date" @change="changeDate($event, item.filedId)"></u-calendar>
						</view>
						
						
						<view class=""  v-else-if="item.tag == 'el-input' && item.tagIcon == 'textarea'">
							<textarea @blur="blurTextarea($event, item.filedId)" :placeholder="item.placeholder" :auto-height="true" :disable-default-padding="true" class="textarea" />
						</view>
						
						<view class="form_region" v-else-if="item.tag == 'el-radio-group'">
							<view class="radio">
								<u-radio-group class="radio_" size="40" active-color="red" icon-size="25" @change="radioGroupChange($event, item.filedId, item.optionList)">
									<u-radio :name="item1.value" icon-size="25" label-size="30" v-for="(item1, index1) in item.optionList" :key="index">{{item1.label}}</u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="foot_buttom" v-if="index == formFieldList.length-1"></view>
					</view>
				</view>
				
			</view>
			
			<view class="foot">
				<view class="submit" @click="toShowTask">提交</view>
			</view>
			
		</view>
		<view>
			<u-popup v-model="showTask" mode="bottom" height="440" border-radius="12">
				<view class="popup">
					<view class="popup_">确认提交{{utilItemName}}任务吗？
						<view class="popup_text">提交后将无法修改。</view>
					</view>
					<view class="popup_cancel">
						<view class="popup_cancel_" @click="popupCancel">取消</view>
						<view class="popup_cancel_determine" @click="goSuccessfully">提交</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// menuButtonInfo: {
				// 	top: 25
				// },
				progressPercent: 50,
				showPoition: false,
				valuePosition: '',
				showTask: false,
				showDate: false,
				activityIDList: '',
				formFieldList: [],
				formFieldListApi: [],
				showSelect: false,
				utilItemId: '',
				index: '',
				optionListAddress: [], // 联动数据
				showAddressSelect: false,
				utilItemName: '',
				ossSignData: {},	//上传步骤一
			}
		},
		onLoad(param) {
			console.log("参数", param)
			this.init(param)
		},
		methods: {
			init(param) {
				// // #ifndef H5 || APP-PLUS || MP-ALIPAY
				// this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// // #endif
				
				if(param.index){
					this.index = param.index
				}
				
				
				this.$apis.activity(
					param.activityId
				).then(res => {
					this.activityIDList = res.data
					this.formFieldList = res.data.utilItemList[param.index].formFieldList
					
					let utilItemName = res.data.utilItemList[param.index].utilItemName
					if(!utilItemName){
						utilItemName = "任务答题"
					}
					this.utilItemName = utilItemName
					uni.setNavigationBarTitle({
						title: utilItemName
					})
					this.utilItemId = this.activityIDList.utilItemList[param.index].utilItemId
					console.log("表单数据", this.formFieldList)
					console.log("活动数据", this.activityIDList)
					
					if(this.formFieldList) {
						this.formFieldList.forEach((item, index) => {
							if(item.tag == 'el-checkbox-group'){
								item.optionList.forEach((item1,index1) => {
									item1.checked = false
								})
							}
						})
						
						this.formFieldList.forEach((item, index) => {
							this.formFieldListApi.push({
								utilItemId: this.activityIDList.utilItemList[param.index].utilItemId,
								filedId: item.filedId,
								fieldValue: '',
								delData: '',
								fieldValueStr: ''
							})
						})
						console.log("formFieldListApi", this.formFieldListApi)
					}
				})
				
				
				let op =[]
				
				//  获取全部地区
				this.$apis.regionList().then(res => {
					console.log("获取全部地区", res.data)
					let o_ = res.data
					o_.forEach((item, index) => {
						op.push({
							value: item.id,
							label: item.name,
							children: []
						})
						item.addressList.forEach((item1, index1) => {
							op[index].children.push({
								value: item1.id,
								label: item1.name,
								children: []
							})
							// console.log("item1",item1)
							if(Array.isArray(item1.addressList)){
								item1.addressList.forEach((item2, index2) => {
									op[index].children[index1].children.push({
										value: item2.id,
										label: item2.name,
									})
								})
							}
							
						})
					})
				})
				this.optionListAddress = op
				console.log("this.optionListAddress",this.optionListAddress)
				
				this.$apis.ossSign().then(res => {
					this.ossSignData = res.data
					console.log("图片上传1：this.ossSignData", this.ossSignData)
				})
			},
			goNavigateBack() {
				uni.navigateBack()
			},
			getPoition() {
				console.log("this.showPoition",this.showPoition)
				this.showPoition = !this.showPoition
			},
			confirmPoition(e) {
				this.valuePosition = e.province.label + '·' + e.city.label + '·' + e.area.label
			},
			toShowTask() {
				let t = this.setFormFieldListRegList()
				console.log("t", t)
				if(t){
					 return
				}
				this.showTask = true
			},
			popupCancel() {
				this.showTask = false
			},
			// 校验
			setFormFieldListRegList() {
				let v = this.formFieldList
				for(let i=0; i < v.length; i++){
					if(v[i].required){
						if(this.formFieldListApi[i].fieldValue == ''){
							console.log("this.formFieldListApi[i]",this.formFieldListApi[i])
							uni.showToast({
								// title: v[i].label + "不能为空",
								title: "第" + (1+i) + "项不能为空",
								icon: "none"
							})
							return true
						}
					}
				}
				
				// v.forEach((item, index) => {
				// 	if(item.required) {
						
				// 		if(this.formFieldListApi[index].fieldValue == ''){
				// 			console.log(this.formFieldListApi[index].fieldValue)
				// 			uni.showToast({
				// 				title: item.label + "的内容不能为空",
				// 				icon: "none"
				// 			})
				// 			return true
				// 		}
				// 	}
				// })
				
			},
			goSuccessfully() {
				uni.requestSubscribeMessage({
				  tmplIds: ['oIQh_BL89O4Jqfm7zCqNaLDoTojWGAXdz2lglbL6OGQ'],
				  success: ress => {
					  console.log("订阅成功", ress)
				  },
				  complete: c => {
					 
					  if(ress.p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w == 'reject'){
					  	uni.showToast({
					  		title: "订阅失败",
					  		icon:'error',
					  		duration: 2500
					  	})
					  }else if(ress.p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w == 'accept'){
					  		 this.initComplete()
					  }
				  }
				})	
			},
			initComplete(){
				
									  let formFieldListApi_ = []
									  this.formFieldListApi.forEach((item, index) => {
									  	formFieldListApi_.push({
									  		utilItemId: item.utilItemId,
									  		required: item.required,
									  		filedId: item.filedId,
									  		fieldValue: item.fieldValue,
									  		fieldValueStr: item.fieldValueStr
									  	})
									  })
									  console.log("请求参数", JSON.stringify(formFieldListApi_))
									  
									  this.$apis.setActivityFillForm(
										this.activityIDList.activityId,
										this.utilItemId,
									  	formFieldListApi_
									).then(res => {
									  	if(res.code == 503){
									  		// uni.showToast({
									  		// 	title: res.msg,
									  		// 	icon: "none"
									  		// })
									  		uni.showToast({
									  			title: "重复提交错误 为您跳转到首页",
									  			icon: "none",
									  			duration: 2500,
									  			success: res => {
									  				setTimeout(() => {
									  					uni.switchTab({
									  						url: "../../index/index"
									  					})
									  				},2500)
									  			}
									  		})
									  		
									  	}else if(res.code == 200){
									  		// uni.navigateTo({
									  		// 	url: "../successfully/successfully?index=" + this.index +  "&activityId=" + this.activityIDList.activityId
									  		// })
											uni.redirectTo({
												url: "../successfully/successfully?index=" + this.index +  "&activityId=" + this.activityIDList.activityId
											})
									  	}else{
									  		uni.showToast({
									  			title: "重复提交错误 为您跳转到首页",
									  			icon: "none",
									  			duration: 2500,
									  			success: res => {
									  				setTimeout(() => {
									  					uni.switchTab({
									  						url: "../../index/index"
									  					})
									  				},2500)
									  			}
									  		})
									  	}
									  	
									  })
			},
			showValue(id) {
				for(let i=0; i<this.formFieldListApi.length; i++){
					let item = this.formFieldListApi[i];
					if(item.filedId == id){
						return item.delData
					}
				}
			},
			getSelect() {
				this.showSelect = !this.showSelect
			},
			confirmSelect(e, id){
				let value = e[0].value
				let delData = e[0].label
				value = value.toString()
				this.setFormFieldListApi(id, value, delData)
			},
			checkboxChange(e, id, itemValue){
				let value = []
				let delData = []
				let detailValue = e.detail.value
				itemValue.forEach((item, index) => {
					let i = detailValue.indexOf(index.toString())
					if(i != -1){
						value.push(item.value)
						delData.push(item.label)
					}
				})
				value = value.join(",")
				delData = delData.join(",")
				this.setFormFieldListApi(id, value, delData)
				
			},
			toShowDate(){
				this.showDate = !this.showDate
			},
			changeDate(e,id){
				let value = e.result
				this.setFormFieldListApi(id, value, value)
				
			},
			getAddressSelect(){
				// console.log("optionListAddress", this.optionListAddress)
				this.showAddressSelect = !this.showAddressSelect
			},
			blurInput(e, id) {
				let value = e.detail.value
				this.setFormFieldListApi(id, value, value)
			},
			blurTextarea(e,id){
				let value = e.detail.value
				this.setFormFieldListApi(id, value, value)
			},
			radioGroupChange(e, id, itemValue){
				let value = ''
				let delData = ''
				itemValue.forEach((item, index) => {
					if(item.value == e){
						value = item.value
						value = value.toString()
						delData = item.label
					}
				})
				console.log("单选e", e)
				console.log("itemValuee", itemValue)
				this.setFormFieldListApi(id, value, delData)
			},
			confirmAddressSelect(e,id){
				let value =  e[0].value + '-' + e[1].value + '-' + e[2].value
				let delData = e[0].label + '-' + e[1].label + '-' + e[2].label
				value = value.toString()
				this.setFormFieldListApi(id, delData, delData)
			},
			
			
			setFormFieldListApi(id, value, delData) {
				this.formFieldListApi.forEach((item, index) => {
					if(item.filedId == id){
						// item.defaultValue = value
						item.fieldValue = value
						if(delData){
							item.fieldValueStr = delData
							item.delData = delData
						}
					}
				})
				console.log("formFieldListApi", this.formFieldListApi)
			},
			onChange(e, id) {
				uni.showLoading({
					title: "上传中..."
				})
				console.log("onChange", e)
				let _e = e
				let config = this.ossSignData
				// config.token = uni.getStorageSync('token')
				let configToken = uni.getStorageSync('token')
				// config.key = parseInt(Math.random()*100000000000000)
				// config.key = this.$Tools.randomWord(true, 10-24)
				// let configKey = this.$Tools.randomWord(true, 10-24)
				let configKey = new Date().getTime()
				let imageUrlList = []
				
				_e.forEach( (item, index) => {
					uni.uploadFile({
						url: this.$config.url + "/client-api/common/checkImage",
						header: {
							Authorization: configToken
						},
						file: item.file,
						filePath: item.file.path,
						name: 'file',
						success: res => {
							let _res 
							if(typeof(res.data) == 'string'){
								_res = JSON.parse(res.data)
							}
							// let _res = JSON.parse(res.data)
							if(_res.code === 503){
								if(index == _e.length-1){
									uni.hideLoading()
								}
								this.$refs.uUpload.remove(index);
								uni.showToast({
									title: "第"+ (index+1) +"张图片不合法 已删除",
									icon: "none"
								})
							}else {
								uni.uploadFile({
									url: config.host,
									file: item.file,
									filePath: item.file.path,
									name: "file",
									formData: {
										'key': config.dir + "/" + configKey + index +".jpg",
										'policy': config.policy,
										'OSSAccessKeyId': config.accessid,
										'signature': config.signature,
										'success_action_status': '200',
										'callback': config.callback,
										'x:auth': configToken,
										'x:owner_type': 2
									},
									success: resFile => {
										console.log("上传成功：resFile", resFile)
										console.log("res.data", typeof(resFile.data))
										let _resFile = JSON.parse(resFile.data)
										console.log("上传成功：头像", _resFile.data.filename)
										imageUrlList.push(_resFile.data.filename)
										this.imageUrlList = imageUrlList
										console.log("图片集合：", this.imageUrlList)
										let imageUrlList_ = this.imageUrlList.toString()
										
										this.setFormFieldListApi(id, imageUrlList_, imageUrlList_)
										if(index == _e.length-1){
											uni.hideLoading()
										}
									},
									fail: err => {
										if(index == _e.length-1){
											uni.hideLoading()
										}
									}
								})
								
							}
						}
					})
				})
			},
			
		}
	}
</script>

<style lang="scss">
	
	.taskTitle{
		width: 750rpx;
		overflow-x: hidden;
	}
	.bg_top{
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}
	.z_index{
		z-index: 10;
	}
	.top{
		width: 750rpx;
		height: 48rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 20rpx;
	}
	.top_icon{
		margin-left: 32rpx;
		display: inline-block;
	}
	.top_title{
		position: absolute;
		font-size:34rpx;
		font-weight: 500;
		line-height: 48rpx;
		display: inline-block;
		left: 50%;
		transform: translate(-50%);
	}
	
	.speed{
		width: 670rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.content{
		margin: 40rpx 40rpx 0rpx 40rpx;
	}
	.answer{
		vertical-align: top;
		// margin-bottom: 300rpx;
	}
	.answer_{
		margin-bottom: 64rpx;
	}
	.answer_num{
		width: 48rpx;
		height: 40rpx;
		display: inline-block;
		color: #909499;
		font-size: 32rpx;
		font-weight: 700;
		position: relative;
		margin-right: 12rpx;
		vertical-align: top;
	}
	.answer_num text{
		color: #f10200;
		position: absolute;
		top: -6rpx;
		left: -16rpx;
	}
	.answer_title{
		width: 610rpx;
		font-size: 30rpx;
		font-weight: 700;
		color: #2d3034;
		display: inline-block;
	}
	.answer_title input{
		// margin-top: 40rpx;
		width: 580rpx;
		// height: 44rpx;
		font-size: 30rpx;
		line-height: 44rpx;
		margin-top: 20rpx;
		padding: 20rpx 30rpx 20rpx 30rpx;
		background: #f5f6f9;
		border-radius: 6px;
	}
	.radio{
		margin-top: 30rpx;
		color: #2d3034;
		font-size: 30rpx;
	}
	.radio_{
		display: block;
	}
	/deep/ .radio_ .u-radio{
		margin-bottom: 30rpx;
		width: 100% !important;
	}
	/deep/ .data-v-172979f2{
		// top: 100% !important;
		transform: translateY(-15%);
	}
	
	.answer_input {
		position: relative;
	}
	.answer_input_icon{
		position: absolute;
		right: 30rpx;
		bottom: 20rpx;
	}
	.foot{
		background-color: #FFFFFF;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding: 20rpx 0 44rpx 0rpx;
	}
	.submit{
		margin-left: 40rpx;
		width: 670rpx;
		padding: 18rpx 0;
		color: #ffffff;
		background: #f10200;
		border-radius: 6px;
		font-weight: 700;
		font-size: 32rpx;
		text-align: center;
	}
	.popup{
		width: 750rpx;
		height: 440rpx;
	}
	.popup_{
		color: #2d3034;
		font-weight: 700;
		font-size: 36rpx;
		padding: 80rpx;
	}
	.popup_text{
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #606266;
		font-weight: 400;
	}
	.popup_cancel{
		margin: 0 40rpx;
		font-size: 32rpx;
		color: #979797;
		text-align: center;
		font-weight: 700;
	}
	.popup_cancel_{
		color: #979797;
		width: 324rpx;
		height: 84rpx;
		display: inline-block;
		margin-right: 20rpx;
		line-height: 84rpx;
	}
	.popup_cancel_determine{
		width: 324rpx;
		height: 84rpx;
		display: inline-block;
		background: #f10200;
		border-radius: 12rpx;
		color: #ffffff;
		line-height: 84rpx;
	}
	
	.form_region{
		position: relative;
	}
	.form_region_image{
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		right: 43rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.form_input{
		margin-top: 20rpx;
		padding: 20rpx 0 20rpx 30rpx;
		color: #2d3034;
		background: #f5f6f9;
		border-radius: 6px;
		width: 630rpx;
		height: 84rpx;
		font-size: 30rpx;
	}
	.form_input_checkbox{
		margin-top: 20rpx;
		// padding: 0rpx 0 20rpx 0rpx;
		color: #2d3034;
		font-size: 30rpx;
	}
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-list-cell {
		justify-content: flex-start
	}
	.uni-list-cell-pd {
		padding: 22rpx 30rpx 22rpx 0rpx;
	}
	.image{
		width: 710rpx;
		margin: 40rpx 0 0 0rpx;
		.addBtn_{
			width: 182rpx;
			height: 182rpx;
			.addBtn{
				width: 182rpx;
				height: 182rpx;
				background-color: #F5F6F9;
				text-align: center;
				line-height: 182rpx;
			}
		}
		/deep/ .u-list-item{
			margin-right: 32rpx;
			margin-bottom: 32rpx;
		}
		/deep/ .u-icon__icon{
			// top: 20rpx !important;
			transform: translateY(45%);
		}
	}
	.textarea{
		width: 580rpx;
		min-height: 100rpx !important;
		background-color: #F5F6F9;
		margin-top: 20rpx;
		padding: 20rpx 30rpx 20rpx 30rpx;
		border-radius: 12rpx;
		font-size: 30rpx;
		line-height: 44rpx;
	}
	/deep/ .u-calendar__action {
		padding: 40rpx 0 40rpx 0;
		display: flex !important;
		justify-content: center !important;
	}
	.foot_buttom{
		margin-top: 500rpx;
	}
	/deep/ .u-radio__label{
		color: #2d3034 !important;
	}
</style>
